<template>
  <div class="advert">
    <el-card class="box-card">
      <template
        #header
        class="clearfix"
      >
        <el-button
          size="small"
          @click="$router.push({
            name: 'add-advertise'
          })"
        >
          添加广告
        </el-button>
      </template>
      <el-table
        :data="adverts"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="用户ID"
        />
        <el-table-column
          prop="name"
          label="广告名称"
        />
        <el-table-column
          prop="name"
          label="广告位置"
        >
          <template #default="{ row }">
            {{ spaces.find(space => space.id === row.spaceId)?.name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="广告图片"
        >
          <template #default="{ row }">
            <img
              :src="row.img || ''"
              style="width: 50px;heigh: 60px;"
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="时间"
        >
          <template #default="{ row }">
            <div>开始时间: {{ row.startTimeFormatString }}</div>
            <div>到期时间: {{ row.endTimeFormatString }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="上线/下线"
          width="100"
        >
          <template #default="{ row }">
            <div style="text-align: center;">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @click="onlineTrigger(row)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template #default>
            <el-button
              size="mini"
              type="text"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'
import { defineComponent, onBeforeMount, ref } from 'vue'
import { getAdList, getAllSpaces, updateStatus } from '/@/services/advert'

const useInit = () => {
  const adverts = ref([])
  const spaces = ref([])
  const fetchSpaces = async () => {
    const { data } = await getAllSpaces()
    if (data.success) {
      spaces.value = data.content
    }
  }

  const fetchList = async () => {
    const { data } = await getAdList()
    if (data.success) {
      adverts.value = data.content
    }
  }
  onBeforeMount(() => {
    fetchSpaces()
    fetchList()
  })
  return {
    spaces,
    adverts
  }
}
const useHandles = () => {
    enum onlineMap {
      '下线',
      '上线'
    }
    // 上线/下线
    const onlineTrigger = async (row: any) => {
      try {
        const res = await ElMessageBox.confirm(`是否将状态改为${onlineMap[row.status]}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (res) {
          const { data } = await updateStatus(row.id, row.status)
          if (data.success) {
            ElMessage.success('更改成功！')
          }
        }
      } catch (error) {
        row.status = row.status ? row.status - 1 : row.status + 1
        ElMessage.warning('更改取消/失败！')
      }
    }
    return {
      onlineTrigger
    }
}
export default defineComponent({
  name: 'AdvertIndex',
  setup () {
    return {
      ...useInit(),
      ...useHandles()
    }
  }
})
</script>

<style lang="scss" scoped></style>
